<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <%@ include file="/include/mobilelibs.jsp" %>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <style>
        .bg {
            background-color: #FFFFFF !important;
        }

        .return {
            color: #FFFFFF !important;
            font-family: "微软雅黑";
        }

        .return1 {
            font-size: 20px !important;
        }

        .list {
            font-size: 18px !important;
        }

        .mui-search1 {
            width: 66% !important;
            height: 40px !important;
            margin: 15px 6px 15px 16px !important;
        }

        .btnCenter {
            text-align: center;
            vertical-align: middle;
            padding: 10px 20px !important;
            background-color: #42bf8e !important;
            border: none !important;
            border-radius: 8px !important;
        }

        .topDiv {
            width: 100%;
            height: 2.18rem;
            border-top: 1px solid #b9e7d5;
            border-bottom: 1px solid #b9e7d5;
            display: table;
            padding-right: 0.36rem;
            padding-left: 0.36rem;
            background-color: #FFFFFF;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .topDiv .mui-tab-item {
            display: table-cell;
            overflow: hidden;
            width: 1%;
            height: 50px;
            text-align: center;
            vertical-align: middle;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .color {
          		  color: #333333 !important;
                margin-bottom: 3px;
			    height: 40px;
			    font-size: 15px;
        }

        .listBgcolor {
            background-color: #b358e7 !important;
        }
        .belowlist{
        	    width: 100%;
			    min-height: 27.5rem;
			    overflow: hidden;
			    border-bottom: 1px solid #EFEFEF;
        }
    </style>
</head>

<body>

<div class="mui-search">
    <input type="search" class="mui-input-clear mui-search1"
           placeholder="搜索关键词 " id="taskName"/>
    <a role="button" class="mui-btn mui-btn-primary btnCenter " href="#" id="searchBtn">搜索</a>
    <div class="topDiv ">
    <select class="color " id="taskType" style="width:33%!important;float:left" onchange="search()">
        <option value="">全部分类 ▾</option>
        <option value="DATA"
                <c:if test="${taskType=='DATA' }">selected=selected</c:if> >数据 ▾
        </option>
        <option value="INVEST" <c:if test="${taskType=='INVEST' }">selected=selected</c:if>>市调 ▾</option>
        <option value="ARRANG" <c:if test="${taskType=='ARRANG' }">selected=selected</c:if>>理贷 ▾</option>
        <option value="PROMOTION" <c:if test="${taskType=='PROMOTION' }">selected=selected</c:if>>促销 ▾</option>
    </select>
    <select class="color " id="orderField" style="width:33%!important;text-align:center" onchange="search()">
        <option value="">智能排序 ▾</option>
        <option value="taskType">任务类型 ▾</option>
        <option value="endTime">结束日期 ▾</option>
        <option value="reward">金额 ▾</option>
        <option value="bynear">距离 ▾</option>
    </select>
    <select class="color " id="orderDirection" style="width:33%!important;float:right" onchange="search()">
        <option value="">排序方式 ▾</option>
        <option value="asc">正序 ▾</option>
        <option value="desc">倒序 ▾</option>
    </select>
        <input id="longitude" type="hidden">
        <input id="latitude" type="hidden">
</div>
</div>
<div class="mui-content bg mui-scroll-wrapper footer"  id="pullrefresh">

<!--下拉刷新容器-->

    <div class="mui-scroll">
        <!--数据列表-->
        <ul class="mui-table-view mui-table-view-chevron">

        </ul>
    </div>

</div>
<nav class="mui-bar2 mui-bar-tab">
    <a class="mui-tab-item mui-active" type='list'> <span
            class="mui-icon iconfont">&#xe605;</span> <span
            class="mui-tab-label fontSize">任务大厅</span>
    </a> <a class="mui-tab-item" type='mytask'>
    <span class="mui-icon iconfont">&#xe603;</span> <span
        class="mui-tab-label fontSize">我的任务</span>
</a> <a class="mui-tab-item" type='person'>
    <span class="mui-icon iconfont">&#xe600;</span>
    <span class="mui-tab-label fontSize">个人中心</span>
</a>
</nav>
<script type="text/javascript">
    $(function(){
        navigator.geolocation.getCurrentPosition(showPosition);
    })

    function showPosition(position){
        var Latitude = position.coords.latitude;
        var Longitude = position.coords.longitude;
        $("#longitude").val(Longitude);
        $("#latitude").val(Latitude);
    }
function search() {
    $.ajax({
        url: "list.json",
        cache: false,
        dataType: "json",
        data: {userId: localStorage.userId,
            taskName: $("#taskName").val(),
            orderDirection: $("#orderDirection").val(),
            taskType: $("#taskType").val(),
            orderField: $("#orderField").val(),
            offset: $("#offset").val(),
            limit: $("#limit").val(),
            longitude:$("#longitude").val(),
            latitude:$("#latitude").val()
   },
        success: function (data) {
            var json = data.rows;
            var table = document.body.querySelector('.mui-table-view');
            var childs = table.childNodes;
            for (var i = childs.length - 1; i >= 0; i--) {
                table.removeChild(childs.item(i));
            }
            var cells = document.body.querySelectorAll('.size');

            for (var s in  json) {
                var div = document.createElement('div');
                var type = json[s].taskType;
                var typeValue = "";
                if (type == '理货') {
                    typeValue = '<div class="below-left4">' + '<div class="iconfont5">&#xe601;</div>' + '</div>';
                } else if (type == '促销') {
                    typeValue = '<div class="below-left3">' + '<div class="iconfont5">&#xe604;</div>' + '</div>';
                } else if (type == '数据') {
                    typeValue = '<div class="below-left">' + '<div class="iconfont5">&#xe607;</div>' + '</div>';
                } else if (type == '市调') {
                    typeValue = '<div class="below-left1">' + '<div class="iconfont6">&#xe602;</div>' + '</div>';
                }
                div.className = ' size mui-table-view';
                div.innerHTML = '<div class="below mui-table-view-cell" style="padding-right:0" id=' + json[s].id + '>' +
                        '<div class="footer-left">' + typeValue + '<span class="footer-text">' + type + '</span>' +
                        '</div>' + '<div class="footer-center">' +
                        '<p class="pTitle">[' + json[s].taskType + '] ' + json[s].taskName + '</p>' +
                        '<p class="pTime">时限：' + json[s].endDate + '</p>' +
                        '<p class="pPlace">门店：' + json[s].storeName + '</p>' +
                        '</div>' +
                        '<div class="price">' +
                        '<p class="proceText">' + json[s].money + '</p>' +
                        '</div>' +
                        '</div>';
              //  table.insertBefore(div, table.firstChild);
                table.appendChild(div);
            }
        }
    })
}
$("#searchBtn").click(function () {
    search();
});

function taskDetail(id) {
    window.location.href = "subTaskDetail.html?userId="
            + localStorage.userId + "&id=" + id
}
mui.init({
    pullRefresh: {
        container: '#pullrefresh',
        down: {
            callback: pulldownRefresh
        },
        up: {
            contentrefresh: '正在加载...',
            callback: pullupRefresh
        }
    }
});
/**
 * 下拉刷新具体业务实现
 */
function pulldownRefresh() {
    setTimeout(function () {
        var cells = document.body.querySelectorAll('.size');
        $.ajax({
            url: "list.json",
            cache: false,
            dataType: "json",
            data: {userId: localStorage.userId,
                taskName: $("#taskName").val(),
                orderDirection: $("#orderDirection").val(),
                taskType: $("#taskType").val(),
                orderField: $("#orderField").val(),
                offset: cells.length,
                limit: $("#limit").val(),
                longitude:$("#longitude").val(),
                latitude:$("#latitude").val()},
            success: function (data) {
                var json = data.rows;
                var table = document.body.querySelector('.mui-table-view');
                if (cells.length < data.total) {
                    for (var s in  json) {
                        var div = document.createElement('div');
                        var type = json[s].taskType;
                        var typeValue = "";
                        if (type == '理货') {
                            typeValue = '<div class="below-left4">' + '<div class="iconfont5">&#xe601;</div>' + '</div>';
                        } else if (type == '促销') {
                            typeValue = '<div class="below-left3">' + '<div class="iconfont5">&#xe604;</div>' + '</div>';
                        } else if (type == '数据') {
                            typeValue = '<div class="below-left">' + '<div class="iconfont5">&#xe607;</div>' + '</div>';
                        } else if (type == '市调') {
                            typeValue = '<div class="below-left1">' + '<div class="iconfont6">&#xe602;</div>' + '</div>';
                        }
                        div.className = 'size mui-table-view';
                        div.innerHTML = '<div class="below mui-table-view-cell" style="padding-right:0" id=' + json[s].id + '>' +
                                '<div class="footer-left">' + typeValue + '<span class="footer-text">' + type + '</span>' +
                                '</div>' + '<div class="footer-center">' +
                                '<p class="pTitle">[' + json[s].taskType + '] ' + json[s].taskName + '</p>' +
                                '<p class="pTime">时限：' + json[s].endDate + '</p>' +
                                '<p class="pPlace">门店：' + json[s].storeName + '</p>' +
                                '</div>' +
                                '<div class="price">' +
                                '<p class="proceText">' + json[s].money + '</p>' +
                                '</div>' +
                                '</div>';
                        //  table.insertBefore(div, table.firstChild);
                        table.appendChild(div);
                    }
                }
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
            }
        })
    }, 1500);
}
var count = 0;
/**
 * 上拉加载具体业务实现
 */
function pullupRefresh() {
    setTimeout(function () {
        var cells = document.body.querySelectorAll('.size');
        $.ajax({
            url: "list.json",
            cache: false,
            data: {userId: localStorage.userId,
                taskName: $("#taskName").val(),
                orderDirection: $("#orderDirection").val(),
                taskType: $("#taskType").val(),
                orderField: $("#orderField").val(),
                offset: cells.length,
                limit: $("#limit").val(),
                longitude:$("#longitude").val(),
                latitude:$("#latitude").val()},
            dataType: "json",
            success: function (data) {
                var json = data.rows;
                var table = document.body.querySelector('.mui-table-view');
                if (cells.length < data.total) {
                    for (var s in  json) {
                        var div = document.createElement('div');
                        var type = json[s].taskType;
                        var typeValue = "";
                        if (type == '理货') {
                            typeValue = '<div class="below-left4">' + '<div class="iconfont5">&#xe601;</div>' + '</div>';
                        } else if (type == '促销') {
                            typeValue = '<div class="below-left3">' + '<div class="iconfont5">&#xe604;</div>' + '</div>';
                        } else if (type == '数据') {
                            typeValue = '<div class="below-left">' + '<div class="iconfont5">&#xe607;</div>' + '</div>';
                        } else if (type == '市调') {
                            typeValue = '<div class="below-left1">' + '<div class="iconfont6">&#xe602;</div>' + '</div>';
                        }
                        div.className = 'size mui-table-view';
                        div.innerHTML = '<div class="below mui-table-view-cell" style="padding-right:0" id=' + json[s].id + '>' +
                                '<div class="footer-left">' + typeValue + '<span class="footer-text">' + type + '</span>' +
                                '</div>' + '<div class="footer-center">' +
                                '<p class="pTitle">[' + json[s].taskType + ']' + json[s].taskName + '</p>' +
                                '<p class="pTime">时限：' + json[s].endDate + '</p>' +
                                '<p class="pPlace">门店：' + json[s].storeName + '</p>' +
                                '</div>' +
                                '<div class="price">' +
                                '<p class="proceText">' + json[s].money + '</p>' +
                                '</div>' +
                                '</div>';
                        //  table.insertBefore(div, table.firstChild);
                        table.appendChild(div);
                    }
                }
                mui('#pullrefresh').pullRefresh().endPullupToRefresh((cells.length >= data.total)); //参数为true代表没有更多数据了。
            }
        })
    }, 1500);
}
if (mui.os.plus) {
    mui.plusReady(function () {
        setTimeout(function () {
            mui('#pullrefresh').pullRefresh().pullupLoading();
        }, 1000);

    });
} else {
    mui.ready(function () {
        mui('#pullrefresh').pullRefresh().pullupLoading();
    });
}

//添加列表项的点击事件
mui(".mui-table-view").on('tap', '.mui-table-view-cell', function () {
    var id = this.getAttribute('id');
    //打开详情页面
    mui.openWindow({
        id: 'subTaskDetail.html',
        url: 'subTaskDetail.html?id=' + id + "&userId=" + localStorage.userId
    });
});

//添加列表项的点击事件
mui(".mui-bar-tab").on('tap', '.mui-tab-item', function () {
    var type = this.getAttribute('type');
    if (type == 'list') {
        mui.openWindow({
            id: 'list.html',
            url: 'mobile.html?userId=' + localStorage.userId
        });
    } else if (type == 'mytask') {
        mui.openWindow({
            id: 'myTask.html',
            url: 'myTask.html?userId=' + localStorage.userId
        });
    } else if (type == 'person') {
        mui.openWindow({
            id: 'personalCenter.html',
            url: 'personalCenter.html?userId=' + localStorage.userId
        });
    }


});
</script>
</body>
</html>